<template>
	<scroll-view class="tabs" scroll-x :scroll-into-view="intoView">
		<view class="tab-item" v-for="(item, index) in data" :key="index"
			:id="item[idKey]" :inline="inline"
			:active="item[idKey] == value" @click="tabHandle(item, index)">
			<slot :row="item" :index="index">{{item[nameKey]}}</slot>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			data: { // 数据
				type: Array,
				default: () => { return [] }
			},
			value: [Number, String],
			idKey: { // key值
				type: String,
				default: 'id'
			},
			nameKey: { // key值
				type: String,
				default: 'name'
			},
			inline: Boolean // 内联模式--圆角
		},
		data() {
			return {
				// 滚动条-位置id值-2
				intoView: ''
			}
		},
		methods: {
			// 滚动条-item点击回调
			tabHandle(row, index) {
				// 触发v-model 值更新
				this.$emit('change', row[this.idKey])
				// 调整滚动条位置
				let ind = index - 2
				ind = ind >= 0 ? ind : 0
				this.intoView = this.data[ind][this.idKey]
			}
		}
	}
</script>

<style lang="scss" scoped>
.tabs{
	white-space: nowrap;
	.tab-item{
		position: relative;
		display: inline-block;
		padding: 10rpx 20rpx;
		font-size: 25rpx;
		&[active][inline]{
			background: #419ee0;
			border-radius: 20px;
			color: #fff;
		}
		&[active]:not([inline]){
			font-weight: bold;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 5rpx;
				background: #419ee0;
			}
		}
	}
}
</style>
